<template>
  <div class="antv-chart-mini">
    <div class="chart-wrapper" :style="{ height: 46 }">
      <v-chart :force-fit="true" :height="height" :data="data" :padding="[36, 5, 18, 5]">
        <v-tooltip />
        <v-line position="x*y" />
        <v-point position="x*y" shape="circle" />
      </v-chart>
    </div>
  </div>
</template>

<script>

  const tooltip = [
    'x*y',
    (x, y) => ({
      name: x,
      value: y
    })
  ]

  const scale = [{
    dataKey: 'x',
    min: 2
  }, {
    dataKey: 'y',
    title: '时间',
    min: 1,
    max: 30
  }]

  export default {
    name: 'MyMiniLine',
    props: {
      data: {
        type: Array,
        default: () => {
          return []
        }
      }
    },
    data () {
      return {
        tooltip,
        scale,
        height: 100
      }
    }
  }
</script>

<style lang="less" scoped>
  .antv-chart-mini {
    position: relative;
    width: 100%;

    .chart-wrapper {
      position: absolute;
      bottom: -28px;
      width: 100%;

      /*    margin: 0 -5px;
          overflow: hidden;*/
    }
  }
</style>
